<template>
  <div>
    <Header />
    <!-- 加载渲染路由组件 -->
    <div class="app-container">
      <router-view />
    </div>
    <!-- 
      登录和注册页面不需要Footer，其他页面都需要 
        v-if  隐藏时销毁元素
        v-show 隐藏时，通过样式display: none隐藏的
          频繁切换用v-show性能更好

      vue-router会给所有组件注入两个对象：
        $route: 可以获取路由参数和路由路径
          路由参数：
            query：this.$route.query
            params：this.$route.params
            meta：this.$route.meta

          路由路径: this.$route.path

        $router: 编程式导航 this.$router.push()
    -->
    <!-- <Footer v-if="$route.path !== '/login' && $route.path !== '/register'" /> -->
    <!-- <Footer v-if="isShowFooter" /> -->
    <!-- <Footer v-if="$route.meta.isShowFooter" /> -->
    <Footer v-if="!$route.meta.isHideFooter" />
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";

export default {
  name: "App",
  computed: {
    isShowFooter() {
      // return this.$route.path !== "/login" && this.$route.path !== "/register";
      const path = this.$route.path;
      return path !== "/login" && path !== "/register";
    },
  },
  components: { Header, Footer },
};
</script>

<style lang="less">
.app-container {
  // vw视口宽度 vh视口高度
  // 将视口等分为100份，100vh就是视口高度的100%
  min-height: calc(100vh - 127px - 270px);
}
</style>
